<template>
  <div>
      <div class="header">
          <div class="header-container">
              <a href="#" class="logo">Logo</a>
              <nav class="main-navigation">
                  <ul>
                      <li><a href="/">首页</a></li>
                      <li><a href="#">关于我们</a></li>
                      <li><a href="#">服务</a></li>
                      <li><a href="#">联系方式</a></li>
                  </ul>
              </nav>
              <div class="search-bar">
                  <input type="text" placeholder="搜索...">
                  <button type="submit">搜索</button>
              </div>
              <a href="#" class="person">个人中心</a>
          </div>
      </div>
      <el-container style="height: 100vh; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-menu-item index="/statistics">
              <i class="el-icon-warning"></i>
              <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="1">
              <template slot="title">
              <i class="el-icon-menu"></i>
              <span>线索追踪</span>
              </template>

              <el-menu-item-group>
              <el-menu-item index="/menu">域名线索</el-menu-item>
              <el-menu-item index="/role">URL线索</el-menu-item>
              <el-menu-item index="/admin">邮箱线索</el-menu-item>
              <el-menu-item index="/prole">手机号线索</el-menu-item>
              </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
              <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>专业分析</span>
              </template>

              <el-menu-item-group>
              <el-menu-item index="/category">代码反编译</el-menu-item>
              <el-menu-item index="/specs">签名证书</el-menu-item>
              <el-menu-item index="/goods">硬编码泄露信息</el-menu-item>
              <el-menu-item index="/seckill">加壳分析</el-menu-item>
              <el-menu-item index="/banner">第三方插件</el-menu-item>
              <el-menu-item index="/daction">危险动作</el-menu-item>
              </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/baogao">
              <i class="el-icon-menu"></i>
              <span slot="title">生成PDF报告</span>
          </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-container>   
          <el-main>
            <el-card class="box-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
            <br>
            <div>
              <el-row :gutter="16" style="margin-top:10px;">
                  <el-col :span="6"><el-card style="height: 80px"></el-card></el-col>
                  <el-col :span="6"><el-card style="height: 80px"></el-card></el-col>
                  <el-col :span="6"><el-card style="height: 80px"></el-card></el-col>
                  <el-col :span="6"><el-card style="height: 80px"></el-card></el-col>
              </el-row>

            </div>
            <br>
            <el-card class="box-card">
              <div class="text item">
                <div class="bkaozuo">
                  <el-button type="danger">Excel</el-button>
                  <el-button type="danger">Dev</el-button>
                </div><br>
                <el-table
                  class="elTable"
                  :data="tableData"
                  border
                  style="width: 100%"
                  :cell-style="{ textAlign: 'center',height:'45px',borderColor:'#C0C0C0' }"
                  :header-cell-style="{ textAlign: 'center',color:'black',height:'40px',borderColor:'#C0C0C0'}">
                  <el-table-column
                    prop="yuming"
                    label="域名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="chaxunyuming"
                    label="查询域名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="ip"
                    label="ip"
                    width="380">
                  </el-table-column>
                  <el-table-column
                    prop="diqu"
                    label="地区"
                    width="280">
                  </el-table-column>
                  <el-table-column
                    prop="chaxundiqu"
                    label="查询地区">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
            <br>
            <el-card class="box-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
            <br>
            <el-card class="box-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
            <br>
            <el-card class="box-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
            <br>
            <el-card class="box-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
  </div>
  
</template>

<style >

/* 设置网页头部框的样式 */

 .header {
  width: 100%; /* 宽度占据全屏 */
  background-color: black; /* 背景颜色 */
  color: white; /* 字体颜色 */
  text-align: left; /* 文本居中 */
  padding: 20 0; /* 上下边距 */
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  z-index: 1000; /* 确保悬浮于页面其他内容之上 */
}

.header-container {
    max-width: 2000px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    font-size: 24px;
    color: #ccc;
    text-decoration: none;
    display: block;
    flex: 1;
}

.main-navigation {
    display: flex;
    left: 750px; 
}

.main-navigation ul {
    list-style-type: none;
    padding: 0;
    display: flex;
}

.main-navigation ul li a {
    text-decoration: none;
    color: #ccc;
    padding: 0 25px;
    display: block;
    transition: filter 0.3s;
}
.main-navigation ul li a:hover{
  color: white;
}

.search-bar {
    display: flex;
    
}

.search-bar input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

.search-bar button {
    padding: 5px 10px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
}

.search-bar button:hover {
    background-color: #555;
}
.person{
  display: flex;
  padding: 5px 10px;
  border: none;
  color: #ccc;
  right: 40px;
  transition: filter 0.3s;
}

.person:hover{
  color: white;
} 

.el-aside {
  color: #333;
  height: 100vh;
  text-align: left
}

.bkaozuo{
display: flex;
}

.elTable {
  border: 1px solid #c0c0c0;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
   background-color: rgb(236, 233, 233) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
   background-color: rgb(236, 233, 233)!important;
}
.el-table__body tr:nth-child(even) {  
  background-color: rgb(236, 233, 233); /* 偶数行（斑马线）的默认背景色 */  
}
</style>

<script>
export default {
  data() {
    const item = {
      yuming: '2016-05-02',
      chaxunyuming: '王小虎',
      ip: '上海市普陀区金沙江路 1518 弄',
      diqu: '上海市普陀区金沙江路 1518 弄',
      chaxundiqu:'上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item)
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};

</script>
